<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // window.onload = function () {
        //     var boxEle = document.querySelector(".box");
        //     console.log(boxEle);
        // }

        // window.onload = function(){
        //     console.log("111");
        // }


    </script>
    <style>
        .box{
            width: 100px;
            height: 2000px;

        }
    </style>
</head>

<body>
    
    <div class="box">我是box</div>
    <button>点击我设置卷去的高度</button>
    <script>
        // 浏览器事件 
        // 1.window.onload  : 浏览器dom 和资源加载完毕的时候执行的函数；
        // window.onload = function(){
        //     console.log("dom加载完毕了");
        // }
        // window.onload = function(){
        //     console.log("222");
        // }
        // var onload;
       
        // onload = function(){
        //     console.log(111);
        // }

        // onload = function(){
        //     console.log(222);
        // }
        // onload();

        // 2. window.onscroll 事件 ： 浏览器窗口在滚动的时候触发；
        // scroll 滚动
        // 获取浏览器的卷去高度 或者是左边卷去的距离；scrollTop
        // 可以设置 浏览器的卷去高度；
        // 第一种方式 :   document.documentElement.scrollTop 页面有文档声明的时候使用
        // document.documentElement.scrollTop
        // 第二种方式 ： 如果没有文档声明 需要通过  document.body.scrollTop
        window.onscroll = function(){
            // console.log("滚了");
            // console.log( document.documentElement.scrollTop);
            // console.log(document.body.scrollTop);
            // var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // console.log(scrollTop);
        }

        // 设置卷去的高度
        document.querySelector("button").onclick = function(){
            document.documentElement.scrollTop = 300;
        }

        //1. 写一遍  2.搜索框的悬浮  、回到顶部；



    </script>
</body>

</html>